<template>
  <div class="">
    <img class="cloud cloud1" :src="require('../assets/images/cloud.png')"  alt="">
    <img class="cloud cloud2" :src="require('../assets/images/cloud.png')"  alt="">
  </div>
</template>

<script>

export default {
  name: 'cloud',
  data () {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes cloud1 {
  from{
    transform: translateX(0)
  }
  to{
    transform: translateX(-12rem)
  }
}
@keyframes cloud2 {
  from{
    transform: translateX(0)
  }
  to{
    transform: translateX(12rem)
  }
}
.cloud{
  position:absolute;
  top:40%;
  right:-4.26rem;
  display:block;
  width:4.26rem;
}
.cloud1{
  animation: cloud1 8s linear infinite;
}
.cloud2{
  top:60%;
  left:-4.26rem;
  animation-delay: 4s;
  animation: cloud2 8s linear infinite;
}
</style>
